<template>
	<div class="live-right-nav">
		<p class="title">更多直播</p>
		<ul>
			<li v-for="(v,index) of liveMoreArray" :key="v.roomId"  @click="goToLive(v.roomId)">
				<img :src="v.imagUrl" >
				<p class="li-title">{{v.title}}</p>
				<p class="li-des">{{v.intro}}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		props:{
			liveMoreArray:Object,
		},
		data(){
			return{
				
			}
		},
		created(){
			console.log(this.liveMoreArray)
		},
		methods:{
			goToLive(roomId) {
			  console.log(roomId)
			  this.$router.push(`/${this.$channel}/liveRoom/${roomId}?dzhPage=true`);
			},
		}
	}
</script>

<style scoped="scoped" lang="less">
	.live-right-nav{
		width: 100%;
		width: 25.75rem;
		height: 100vh;
		background: rgba(0, 0, 0, 0.8);
		padding:105px 40px 0  38px ;
		color: white;
		overflow-y: scroll;
		.title{
			font-size: 34px;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 48px;
			margin-bottom: 32px;
		}
		ul{			
		   li{
			    margin-bottom: 50px;
			   .li-title{
				   width: 334px;
				   font-size: 28px;
				   font-weight: 500;
				   color: #FFFFFF;
				   line-height: 40px;
				   letter-spacing: 1px;
				   white-space :nowrap;
				   overflow:hidden;
				   text-overflow:ellipsis;
			   }
			   .li-des{
				   width: 334px;
				   font-size: 22px;
				   font-weight: 400;
				   color: #999999;
				   line-height: 30px;
				   letter-spacing: 1px;
				  
				   white-space :nowrap ;
				   overflow:hidden;
				   text-overflow:ellipsis;
			   }
			img{
				width: 334px;
				height: 188px;
			}
		  }
		}  
	}
</style>
